<template>
  <div class="table-box">
    <ProTable :columns="columns" :requestApi="getFeedBackList" :initParam="initParams" ref="proRef">
      <template #tableHeader>
        <el-button type="primary" @click="opera">写反馈</el-button>
      </template>
      <template #expand="{ row }">
        <div class="p-30px">
          {{ row.cont }}
        </div>
      </template>
      <template #status="{ row }">
        <el-tag type="success" v-show="row.status === 1">已处理</el-tag>
        <el-tag type="danger" v-show="row.status === 2">未处理</el-tag>
      </template>
    </ProTable>
    <feedDrawer ref="feedRef"></feedDrawer>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { getFeedBackList, createFeedBack } from "@/api/modules/feedback";
import { reactive, ref } from "vue";
import feedDrawer from "../components/feedDrawer.vue";

const feedRef = ref<InstanceType<typeof feedDrawer> | null>();

const initParams = reactive({ pageSize: 10, pageNum: 1 });

const columns: ColumnProps[] = [{ type: "expand" }, { prop: "realName", label: "提交人" }, { prop: "status", label: "处理状态" }];

const proRef = ref<InstanceType<typeof ProTable> | null>();

const opera = () => {
  const params: any = {
    row: { cont: "" },
    api: createFeedBack,
    getTable: proRef.value?.getTableList
  };
  feedRef.value?.acceptParams(params);
};
</script>

<style></style>
